<script lang="ts" setup>
import { useFormatDate, usePriceToThousand } from 'co-utils-vue';

import { getArticleList, getArticleRecent } from '@/api/article';
import { IArticleRes } from '@/api/article/type';
import { IWebsite } from '@/api/system/type';
import CoBannerPage from '@/components/cz-banner-page/index.vue';
import { ROUTER_PREFIX } from '@/constant';
import { useSystemStore } from '@/hooks/store/system';
import ListItem from '@/modules/home/ListItem.vue';

const articleList = ref<IArticleRes>({} as IArticleRes);
const recentItemList = ref<IArticleRes['list']>([]);
const systemStore = useSystemStore();
const query = ref({
  pageSize: 10,
  pageNum: 1
});
const website = ref<IWebsite.Data>({} as IWebsite.Data);
const isLoading = ref(false);
const loadingStatus = ref<'loading' | 'error' | 'success'>('loading');
const websiteInfo = () => {
  systemStore.getWebsite().then(res => {
    website.value = res;
  });
};
const getList = () => {
  if (isLoading.value) return;
  if (query.value.pageNum > 1) isLoading.value = true;
  getArticleList(query.value).then(res => {
    if (query.value.pageNum > 1) {
      articleList.value.list.push(...res.list);
      articleList.value.isMore = res.isMore;
    } else {
      articleList.value = res;
    }
    loadingStatus.value = articleList.value.list.length > 0 ? 'success' : 'error';
  }).finally(() => {
    isLoading.value = false;
  }).catch(() => {
    if (query.value.pageNum === 1) {
      loadingStatus.value = 'error';
    }
  });
};
const handleLoadingMore = () => {
  if (articleList.value.isMore === 1) {
    query.value.pageNum += 1;
  }
  getList();
};
const getArticleRecentList = () => {
  getArticleRecent().then(res => {
    recentItemList.value = res;
  });
};
onMounted(() => {
  getList();
  websiteInfo();
  getArticleRecentList();
});
</script>

<template>
  <co-banner-page :banner-url="website.websiteCover">
    <h1>
      <cz-typing text="秋谨" />
    </h1>
    <p>
      <cz-typing
        class="description"
        text="在黑暗中看到了微光，朝着光明去前行"
      />
    </p>
    <span
      ref="typedRef"
      class="text-8 vertical-text word"
    />
  </co-banner-page>
  <div class="container cz-min-h-full row cz-article cz-my-0 cz-mx-auto">
    <div
      class="cz-left-list col col-md-9 cz-mt-5 cz-max-w-6xl
      cz-min-h-[500px] cz-items-start cz-py-0
      md:cz-px-5"
    >
      <div
        v-show="loadingStatus==='success'"
        class="cz-w-full cz-h-full"
      >
        <template
          v-for="(item, index) in articleList.list"
          :key="item.uid"
        >
          <ListItem
            :field-view="index"
            :position="index"
            :row="item"
            class="cz-my-5"
          />
        </template>
        <div
          v-show="articleList.list"
          class="cz-w-full cz-flex cz-py-5 cz-justify-center"
        >
          <div
            v-if="articleList.isMore===1"
            class="cz-text-[var(--cz-primary)] cz-cursor-pointer"
            @click="handleLoadingMore"
          >
            <div v-show="!isLoading">
              加载更多
              <CzSvg name="loading-more" />
            </div>
            <cz-loading
              v-show="isLoading"
              :is-loading="isLoading"
            />
          </div>
          <div v-else>
            没有数据啦~
          </div>
        </div>
      </div>
      <div
        v-if="loadingStatus==='error'"
        class="cz-flex cz-justify-center cz-items-center"
      >
        <img
          src="@/assets/svg/no-article.svg"
          alt=""
          loading="lazy"
          width="300"
          height="300"
        >
      </div>
      <div
        v-if="loadingStatus==='loading'"
        class="cz-flex cz-h-full cz-justify-center cz-items-center"
      >
        <cz-loading
          :is-loading="true"
        />
      </div>
    </div>
    <div
      class="cz-right-abstract
        col col-md-3
        md:cz-block
        cz-hidden
        cz-mt-[20px]"
    >
      <div class="right-card">
        <div
          class="item-card min-h-200px"
        >
          <div class="cz-p-2">
            本站稳定运行：{{ website.websiteRunDays || '-' }} 天
          </div>
          <div class="cz-p-2">
            本站访问量：{{ usePriceToThousand(website.websiteRequestCount, 0) || '-' }} 次
          </div>
          <div class="cz-p-2">
            本站文章数量：{{ website.articleCount || '-' }} 篇
          </div>
        </div>
        <div class="item-card cz-min-h-[300px] cz-mt-5 article">
          <div class="cz-text-center cz-justify-center cz-user-select-none">
            <div>
              <i class="cz-icon icon-fenlei p-r-5px" />
              <span>最近更新</span>
              <div
                v-show="recentItemList.length > 0"
                class="cz-article-recent-list cz-p-1.5"
              >
                <div
                  v-for="article in recentItemList"
                  :key="article.uid"
                  class="article-item cz-cursor-pointer"
                >
                  <div
                    class="content-cover"
                  >
                    <img
                      v-if="article.cover"
                      :key="article.uid"
                      :src="article.cover"
                      alt="封面"
                    >
                    <img
                      v-else
                      :key="article.uid"
                      alt="默认封面"
                      src="@/assets/svg/img-default.svg"
                    >
                  </div>
                  <div class="content">
                    <div class="content-title cz-ellipsis">
                      <a
                        :href="`${ROUTER_PREFIX}/article/${article.uid}`"
                        target="_blank"
                        style="color: inherit"
                      >
                        {{ article.title }}
                      </a>
                    </div>
                    <div class="content-footer cz-py-3">
                      {{ useFormatDate(article.createDate, 'yyyy-MM-dd HH:mm') }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="article-list"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.word {
  font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande",
  "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  font-size: 1.2em;
  font-weight: lighter;
  letter-spacing: 3px;
  color: #ccc;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-weight: 500;
  display: block !important;
  margin: 0 auto 1.8rem !important;
  font-size: 2.5rem !important;
  transition: transform 0.25s ease-in-out 0.04s,
  opacity 0.25s ease-in-out 0.04s;
  transform: translateY(0px);
  opacity: 1;
}

.description {
  animation: change 10s infinite;
  font-weight: 800;
  margin: 1.8rem auto;
  font-size: 1.6rem;
  line-height: 1.3;
  transition: transform 0.25s ease-in-out 0.08s,
  opacity 0.25s ease-in-out 0.08s;
  transform: translateY(0px);
  opacity: 1;
  @keyframes change {
    0% {
      color: #5cb85c;
    }

    25% {
      color: #556bd8;
    }
    50% {
      color: #e40707;
    }
    75% {
      color: #66e616;
    }
    100% {
      color: #67bd31;
    }
  }
}

.right-card {
  position: sticky;
  top: 20px /* 20/16 */
;
  bottom: 5rem;
  right: 1rem;
  //width: 12rem;
  height: 18.75rem /* 300/16 */
;
  padding-left: 0;

  .item-card {
    list-style: none;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #4c4948);
    padding: 20px 24px;
    font-size: 14px;
    border-radius: 8px;
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06) !important;
    transition: all .3s;
    --border-color: var(--bs-body-bg, #fff);
    border-left: 1px solid var(--border-color);
    flex: 0 0 25%;
  }

  .article-title {
    display: flex;
    align-items: center;
    line-height: 2;
    font-size: 16.8px;
    margin-bottom: 6px;
  }

  .article-list {
    .article-item {
      display: flex;
      align-items: center;
      padding: 6px 0;

      .content-cover {
        width: 58.8px;
        height: 58.8px;
        overflow: hidden;
      }

      a {
        color: #4c4948;
        text-decoration: none;
      }

      &:not(:last-child) {
        border-bottom: 1px dashed var(--bs-light-border-subtle, #fff);
      }

      img {
        width: 100%;
        height: 100%;
        border-style: none;
        transition: all .6s;
        -o-object-fit: cover;
        object-fit: cover;
      }

      .content {
        flex: 1;
        padding-left: 10px;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;

        &-title a {
          transition: all .2s;
          font-size: 95%;
        }

        &-time {
          color: #858585;
          font-size: 85%;
          line-height: 2;
        }
      }
    }
  }
  .cz-article-recent-list {
    .article-item {
      display: flex;
      align-items: center;
      padding: 6px 0;

      &:hover {
        background-color: var(--bs-tertiary-bg)
      }

      .content-cover {
        width: 58.8px;
        height: 58.8px;
        overflow: hidden;
      }

      a {
        color: #4c4948;
        text-decoration: none;
      }

      &:not(:last-child) {
        border-bottom: 1px dashed var(--bs-light-border-subtle, #fff);
      }

      img {
        width: 100%;
        height: 100%;
        border-style: none;
        transition: all .6s;
        -o-object-fit: cover;
        object-fit: cover;
      }

      .content {
        flex: 1;
        padding: 5px 10px;
        width: 58.8px;
        height: 58.8px;
        text-align: left;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;

        &-title a {
          transition: all .2s;
          font-size: 95%;
        }

        &-footer {
          color: #858585;
          font-size: 85%;
          line-height: 2;
        }
      }
    }
  }
}
</style>
